<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://www.xipwang.cn/js/zepto.min.js"></script>
</head>
<body>
	
	<div class="countDown" data-endtime = "2017-9-5 15:58:2">
		<span class="d"></span>天
		<span class="h"></span>时
		<span class="m"></span>分
		<span class="s"></span>秒
	</div>
	<div id="test">
		
		<div class="countDown" data-endtime = "2017-9-5 15:53:58">
			<span class="d"></span>天
			<span class="h"></span>时
			<span class="m"></span>分
			<span class="s"></span>秒
		</div>
		<div class="countDown">
			<span class="d"></span>天
			<span class="h"></span>时
			<span class="m"></span>分
			<span class="s"></span>秒
		</div>
		
	</div>
</body>
<script type="text/javascript">
	
	/************** zepto时间倒计时  *********************************************/
	
	/*;(function($){
		$.fn.countTime = function(options){
			function Count(elemnt,options){
					this.elemnt=elemnt;
					this.init();
			}
			
			Count.CONFIG = {
				day:"",
				hour:"",
				min:"",
				sec:""
			}
			Count.prototype ={			
					init:function(){
						this.options = {};
						this.options = $.extend(Count.CONFIG,options||{});
						this.options.EndTime = this.options.EndTime?this.options.EndTime : (this.options.endtime || this.elemnt.data("endtime") || this.elemnt.attr("data-endtime") || "");
						this.options.EndTime = this.options.EndTime.replace(/-/g,"/");//将-转换为/
						this.arr=this.elemnt.children();
						this.time =null	;//定时器 		
						this.updateTime(this,this.options.callback);
					},
					getTimes:function(m,callback){
						var NowTime = new Date();
						var EndTime = new Date(m.options.EndTime);
						//alert(EndTime);
						m.t =EndTime-NowTime  ;	 	
						
						m.d = Math.floor(m.t/1000/60/60/24);
						m.h = Math.floor(m.t/1000/60/60%24);
						m.m = Math.floor(m.t/1000/60%60);
						m.s = Math.floor(m.t/1000%60);
						$(m.arr[0]).text(m.d > 9 ? m.d + m.options.day:"0" + m.d + m.options.day)
						$(m.arr[1]).text(m.h > 9 ? m.h + m.options.hour:"0" + m.h +  m.options.hour);
						$(m.arr[2]).text(m.m > 9 ? m.m + m.options.min:"0" + m.m + m.options.min) 
						$(m.arr[3]).text(m.s > 9 ? m.s + m.options.sec:"0" + m.s + m.options.sec);			
									  
					   	if(NowTime >= EndTime){ 
					   	  	clearInterval(m.time)
							$(m.arr[0]).text("0"+"0"+  m.options.day);
							$(m.arr[1]).text("0"+"0"+  m.options.hour);
							$(m.arr[2]).text("0"+"0"+  m.options.min)
							$(m.arr[3]).text("0"+"0"+  m.options.sec);
							if(typeof callback =="function"){
								callback();
							};
					  	};					  
					},
					updateTime:function(m,callback){				
						m.time=setInterval(function(){
									m.getTimes(m,callback);
							},1000);
					},				
				};
				return this.each(function(){
				  		new Count($(this),options)
				}); 		
			}
	})(Zepto);*/
	
	
	
	/*
	 * 
	 * ios只能识别2017/05/15 24:00:00 时间格式
	 * 
	四个标签存储 天，时，分，秒
	<div class="ms_tit" data-endtime="2017-06-28 00:00:00">还剩下<span>00</span>天<span>00</span>小时<span>00</span>分钟<span>00</span>秒</div>
	$max(".ms_tit").countTime(options);
	opions = {
		EndTime:"2017-06-27 00:00:00",		//结束时间
		day:"",								//默认为空，天的单位
		hour:"",
		min:"",
		sec:""
		callback:function(){},				//到时的回调函数
	}
	* */
	
	;(function(win){
		
		var $max = function(els){
			var elslen = els.length;
			var _this = this;
			_this.selector = els[0];
			_this.context = (els.length >= 2 && _this.isDom(els[1]))?els[1]:document;
			_this.elements = [];             //存放HTML元素
			_this.options = (els.length >= 2 && _this.isJSON(els.length-1))?els[els.length-1]:"";
			_this.getDom(_this.selector,_this.context);
			_this.length = _this.elements.length;
		}
		
		$max.prototype = {
			countTime:function(){
				for (var i = 0; i<this.length;i++) {
					new Count(this.elements[i],this.options);
				}
			},
			getDom:function(selector,context){
				var _this = this;
				var selectorArr = selector.split(",");
				for(var i=0, len=selectorArr.length; i<len; i++) {
		            var element = selectorArr[i];
		            if(typeof element === 'string') {
		            	if(element.substring(0,1) == "#"){
		            		element = context.getElementById(element.substring(1));
		            		_this.elements.push(element);
		            	}else if(element.substring(0,1) == "."){
		            		element = context.getElementsByClassName(element.substring(1));
		            		
		            		for (var i = 0;i<element.length;i++) {
		            			_this.elements.push(element[i]);
		            		}
		            	}else{
		            		element = context.getElementsByTagName(element);
		            		for (var i = 0;i<element.length;i++) {
		            			_this.elements.push(element[i]);
		            		}
		            	}
		            }
		        }
			},
			isDom:( typeof HTMLElement === 'object' ) ? function(obj){ return obj instanceof HTMLElement;} 
												      : function(obj){ return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';},
			isJSON:function(obj){
				return typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length
			}	      
		}
		
		function Count(elemnt,options){
			this.elemnt=elemnt;
			this.init(options);
		}
		
		Count.CONFIG = {
			day:"",
			hour:"",
			min:"",
			sec:""
		}
		Count.prototype ={			
			init:function(ops){
				this.options = {};
				this.options = $.extend(this.options,Count.CONFIG,ops||{});
				this.options.EndTime = this.options.EndTime?this.options.EndTime : (this.options.endtime || this.elemnt.getAttribute("data-time") || this.elemnt.getAttribute("data-endtime") || "");
				this.options.EndTime = this.options.EndTime.replace(/-/g,"/");//将-转换为/
				this.arr = this.getChildNodes(this.elemnt.childNodes);
				this.time =null	;//定时器 		
				this.updateTime(this,this.options.callback);
			},
			getTimes:function(m,callback){
				var NowTime = new Date();
				var EndTime = new Date(m.options.EndTime);
				m.t =EndTime-NowTime  ;	 	
				m.d = Math.floor(m.t/1000/60/60/24);
				m.h = Math.floor(m.t/1000/60/60%24);
				m.m = Math.floor(m.t/1000/60%60);
				m.s = Math.floor(m.t/1000%60);
				m.arr[0].innerHTML = m.d > 9 ? m.d + m.options.day:"0" + m.d + m.options.day ;
				m.arr[1].innerHTML = m.h > 9 ? m.h + m.options.hour:"0" + m.h +  m.options.hour;
				m.arr[2].innerHTML = m.m > 9 ? m.m + m.options.min:"0" + m.m + m.options.min; 
				m.arr[3].innerHTML = m.s > 9 ? m.s + m.options.sec:"0" + m.s + m.options.sec;			
							  
			   	if(NowTime >= EndTime){ 
			   	  	clearInterval(m.time)
					m.arr[0].innerHTML = "0"+"0"+  m.options.day;
					m.arr[1].innerHTML = "0"+"0"+  m.options.hour;
					m.arr[2].innerHTML = "0"+"0"+  m.options.min;
					m.arr[3].innerHTML = "0"+"0"+  m.options.sec;
					if(typeof callback =="function"){
						callback();
					};
			  	};					  
			},
			updateTime:function(m,callback){				
				m.time=setInterval(function(){
							m.getTimes(m,callback);
					},1000);
			},
			getChildNodes:function (childNodes){
				var childNodesArr = [];
				for (var i=0;i<childNodes.length;i++) {
					if(childNodes[i].nodeType == "1"){
						childNodesArr.push(childNodes[i]);
					}
				}
				return childNodesArr;
			}
		};
		win.countDown = function (){
			return new $max(arguments);
		}
	})(window)

	countDown(".countDown").countTime();
	/*window.onload = function(){
		$max(".countDown",document.getElementById("test")).countTime();
	}*/

</script>
</html>